﻿<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}

		#box {
			position: relative;
			margin: 20px auto 0;
			width: 900px;
			height: 500px;
			background: url(img/green.png)no-repeat;
		}

		#demo {
			position: absolute;
			top: 6px;
			left: 12px;
			width: 870px;
			height: 240px;
		}

		#demo>div {
			float: left;
			margin: 5px 13px;
			width: 70px;
			height: 70px;
			line-height: 70px;
			font-size: large;
			text-align: center;
			box-sizing: border-box;
			opacity: 0.8;
			background: white;
			color: black;
		}

		#btn1 {
			position: absolute;
			bottom: 50px;
			right: 150px;
			width: 80px;
			height: 35px;
			color: black;
			font-size: 20px;
			background: deepskyblue;
			border: 0;
			cursor: pointer;
			border-radius: 5px;
		}

		#btn2 {
			position: absolute;
			bottom: 50px;
			right: 50px;
			width: 80px;
			height: 35px;
			color: black;
			font-size: 20px;
			background: deepskyblue;
			border: 0;
			cursor: pointer;
			border-radius: 5px;
		}
	</style>
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function () {
			var run = 0;
			var timer = null;
			
			var times = -1;;

			//生成学生名单
			var arrName = ['谢新冬','彭恩树','吴俊毅','庄启和','黄铭涛','黄定坤','苏浩麟','梁佩珊','廖镇海','古锦权','温展科','叶明俊','贝泽斌','马锦鹏','聂龙成','宋象明','钟狄汶','詹前森','缪治杨','戴宇扬','蔡斯杰','李凯智','覃焕镇','林恩凯','郑腾锟','郑泽典','郑宏维','卢文津','张燠轲','何典臻','谢威','邵泽鸿','彭城','朱俊杰','邓诗培','邱莹炯','王楠','王海龙','陈德滨','张树青','洪晓峰','陈桂通','叶碧青','黄德霖','郑宝玲','孙晓琳'];

			var str = '';
			// console.log(arrName.length);
			for(let i = 0; i < arrName.length; i++) {
				str += `<div>${arrName[i]}</div>`;
			}
			$('#demo').html(str);

			var aDiv = $('#demo div');
			$('#btn1').click(function () {
				clearInterval(timer);
				times += 1;
				if (times == arrName.length+1) {
					$('#demo div').remove();
					$('#demo').append(aDiv);
					aDiv.css({
						'background': 'white',
						'opacity': '0.8'
					});
					times = 0;
				}
				$('div[style*=deepskyblue]').remove();
				timer = setInterval(function () {
					run += 1;
					if (run > 10) {
						clearInterval(timer);
						run = 0;
					} else {
						for (var i = 0; i < aDiv.length; i++) {
							aDiv[i].style.background = 'white';
							aDiv[i].style.opacity = 0.8;
						}
						$('#demo div').eq(Math.floor(Math.random() * (arrName.length - times)))
							.css({
								'background-color': 'deepskyblue',
								'opacity': 1
							});
					}
				}, 100)
			})
			$('#btn2').click(function () {
				$('#demo div').remove();
				$('#demo').append(aDiv);
				aDiv.css({
					'background': 'white',
					'opacity': '0.8'
				});
				times = -1;
			})
		})
	</script>
</head>

<body>
	<div id="box">
		<div id="demo">
			
		</div>
		<input type="button" id="btn1" value="start" />
		<input type="button" id="btn2" value="reset" />
	</div>
</body>

</html>